<template>
  <div class="nodeflow-components">
    <div class="node-wrap" v-if="nodeConfig.type != 4">
      <div
        class="node-wrap-box"
        v-if="nodeConfig.type && nodeConfig.type != 0"
        :class="
          (nodeConfig.type == 0 ? 'start-node ' : '') +
          (isTried && nodeConfig.error ? 'active error' : '')
        "
      >
        <div @click="setPerson">
          <div
            class="title"
            :style="
              'background: rgb(' +
              ['87, 106, 149', '230, 162, 60', '72, 128, 255'][
                nodeConfig.type
              ] +
              ');'
            "
          >
            <!-- 优先级1 -->
            <span class="editable-title">{{ nodeConfig.nodeName }}</span>
            <i
              class="el-icon-close close"
              v-if="nodeConfig.type != 0"
              @click.stop="delNode()"
            ></i>
          </div>
          <div class="content">
            <div class="text" v-if="nodeConfig.type == 1">
              <span
                class="placeholder"
                v-if="nodeConfig.nodeUserType.userName === ''"
              >
                请选择人员
              </span>
              <!-- {{
                nodeConfig.nodeUserType.positionName
                  ? "岗位:" + nodeConfig.nodeUserType.positionName
                  : "请选择岗位"
              }} -->
              {{
                nodeConfig.nodeUserType.userName
                  ? "人员:" + nodeConfig.nodeUserType.userName
                  : "请选择人员"
              }}
            </div>
            <div class="text" v-if="nodeConfig.type == 2">
              <span
                class="placeholder"
                v-if="setApproverStr(nodeConfig) === ''"
              >
                请选择{{ placeholderList[nodeConfig.type] }}
              </span>
              {{ setApproverStr(nodeConfig) }}
            </div>
            <i class="el-icon-arrow-right arrow"></i>
          </div>
          <!-- <div class="error_tip" v-if="isTried && nodeConfig.error">
            <i class="el-icon-warning" style="color: rgb(242, 86, 67);"></i>
          </div> -->
        </div>
      </div>
      <addNode :childNodeP.sync="nodeConfig.childNode"></addNode>
    </div>
    <div class="branch-wrap" v-if="nodeConfig.type == 4">
      <div class="branch-box-wrap">
        <div class="branch-box">
          <button class="add-branch" @click="addTerm">添加条件</button>
          <div
            class="col-box"
            v-for="(item, index) in nodeConfig.conditionNodes"
            :key="index"
          >
            <div class="condition-node">
              <!-- 条件 -->
              <div class="condition-node-box">
                <div
                  class="auto-judge"
                  @click="setPerson(item.priorityLevel, item)"
                  :class="isTried && item.error ? 'error active' : ''"
                >
                  <div
                    class="sort-left"
                    v-if="index != 0"
                    @click.stop="arrTransfer(index, -1)"
                  >
                    <!-- &lt; -->
                  </div>
                  <div class="title-wrapper">
                    <!-- 默认 -->
                    <!-- 审批人 -->
                    <span class="editable-title">{{ item.nodeName }}</span>
                    <!-- 优先级2 -->
                    <span class="priority-title"
                      >优先级{{ item.priorityLevel }}</span
                    >
                    <i
                      class="el-icon-close close"
                      @click.stop="delTerm(index)"
                    ></i>
                  </div>
                  <!-- 设置条件 -->
                  <div
                    class="sort-right"
                    v-if="index != nodeConfig.conditionNodes.length - 1"
                    @click.stop="arrTransfer(index)"
                  >
                    <!-- &gt; -->
                  </div>
                  <div class="content">
                    {{ conditionStr(item, index) }}
                  </div>
                  <div class="error_tip" v-if="isTried && item.error">
                    <i
                      class="el-icon-warning"
                      style="color: rgb(242, 86, 67)"
                    ></i>
                  </div>
                </div>
                <addNode
                  :childNodeP.sync="item.childNode"
                  :tip="'条件'"
                ></addNode>
              </div>
            </div>
            <!-- :dataFields="dataFields" -->
            <nodeWrap
              v-if="item.childNode && item.childNode"
              :nodeConfig.sync="item.childNode"
              :isTried.sync="isTried"
            >
            </nodeWrap>
            <div class="top-left-cover-line" v-if="index == 0"></div>
            <div class="bottom-left-cover-line" v-if="index == 0"></div>
            <div
              class="top-right-cover-line"
              v-if="index == nodeConfig.conditionNodes.length - 1"
            ></div>
            <div
              class="bottom-right-cover-line"
              v-if="index == nodeConfig.conditionNodes.length - 1"
            ></div>
          </div>
        </div>
        <addNode :childNodeP.sync="nodeConfig.childNode"></addNode>
      </div>
    </div>
    <!-- :dataFields="dataFields" -->
    <nodeWrap
      v-if="nodeConfig.childNode && nodeConfig.childNode"
      :nodeConfig.sync="nodeConfig.childNode"
      :isTried.sync="isTried"
    ></nodeWrap>
    <el-drawer
      :visible.sync="approverDrawer"
      custom-class="set_promoter"
      append-to-body
      direction="rtl"
      size="560px"
      :before-close="saveApprover1"
    >
      <div slot="title" class="title flex">
        <span v-if="!approverConfig.titleInputFlag">{{
          approverConfig.nodeName
        }}</span>
        <i
          v-if="!defaultApprovalDrawer"
          class="iconfont icon-icon_edit1 mainColor"
          @click="editNodename"
        ></i>
      </div>
      <div>
        <div class="drawer-content" v-if="approverConfig.type == 1">
          <el-tabs :is-hide-nav="true">
            <el-tab-pane label="审批内容">
              <!-- <div v-if="approverConfig.examineMode === '3'"></div> -->
              <div>
                <!-- <el-radio-group
                  v-model="approverConfig.nodeUserType.type"
                  @change="setTypeRadio"
                >
                  <el-radio label="user">指定内容</el-radio>
                </el-radio-group> -->
                <div v-if="approverConfig.nodeUserType.type == 'user'">
                  <el-form ref="form" label-width="50px">
                    <el-form-item label="部门">
                      <div>
                        <el-cascader
                          v-model="approverConfig.nodeUserType.deptId"
                          :show-all-levels="false"
                          :options="deptList"
                          @change="cascaderChange"
                          :props="{
                            checkStrictly: true,
                            label: 'label',
                            value: 'id',
                            children: 'children',
                            expandTrigger: 'hover',
                          }"
                        ></el-cascader>
                      </div>
                    </el-form-item>
                    <!-- <el-form-item label="岗位">
                      <div>
                        <el-select
                          v-model="approverConfig.nodeUserType.postId"
                          filterable
                          placeholder="请选择"
                          @change="
                            approverConfig.nodeUserType.userId = '';
                            staffer = [];
                          "
                        >
                          <el-option
                            v-for="item in useroptios"
                            :key="item.id"
                            :label="item.positionName"
                            :value="item.id"
                          >
                          </el-option>
                        </el-select>
                      </div>
                    </el-form-item> -->
                    <el-form-item label="人员">
                      <div>
                        <el-select
                          v-model="approverConfig.nodeUserType.userId"
                          filterable
                          placeholder="请选择"
                        >
                          <el-option
                            v-for="item in staffer"
                            :key="item.userId"
                            :label="item.nickName"
                            :value="item.userId"
                          >
                          </el-option>
                        </el-select>
                      </div>
                    </el-form-item>
                  </el-form>
                </div>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
        <div
          class="drawer-content drawer-content-condition"
          v-if="approverConfig.type == 3"
        >
          <!-- 默认条件 -->
          <div v-if="defaultApprovalDrawer" class="default-style">其他情况</div>
          <div v-else>
            <div
              v-for="(item, index) in approverConfig.conditionList"
              :key="index"
            >
              <div class="condition-conent-group">
                <div class="condition-group-title flex">
                  <div class="dang-style">条件组</div>
                  <div>
                    <i
                      class="remove el-icon-delete"
                      @click="removeCondition('group', index)"
                    ></i>
                  </div>
                </div>
                <!-- 选择框 -->
                <div
                  class="condition-group-select"
                  v-for="(it, ind) in item.conditionChildrenNodes"
                  :key="ind"
                >
                  <div class="mg-bot-10">
                    <div v-if="ind === 0" class="flex flex-style">
                      <span class="dang-style">当</span>
                      <i
                        class="remove el-icon-delete"
                        @click="removeCondition('oneCondition', index, ind)"
                      ></i>
                    </div>
                  </div>
                  <!-- 第一个框 -->
                  <el-row :gutter="5" class="mg-bot-10">
                    <el-col :span="8"> </el-col>
                    <el-col :span="5">
                      <el-select v-model="it.approvalKeys" placeholder="请选择">
                        <el-option
                          v-for="item in operatorList"
                          :label="item"
                          :value="item"
                          :key="item"
                        ></el-option>
                      </el-select>
                    </el-col>
                    <el-col :span="10">
                      <el-input
                        v-model="it.approvalKeyValues"
                        placeholder="请输入内容"
                      ></el-input>
                    </el-col>
                  </el-row>
                </div>
                <!-- 添加条件 -->
                <div class="conditionbtn" @click="addConditionGroup('1', item)">
                  <el-button type="">
                    <i class="el-button-suffix el-icon-plus"></i>添加条件
                  </el-button>
                </div>
              </div>
            </div>
            <!-- 添加条件组 -->
            <div class="conditionbtn">
              <el-button type="" @click="addConditionGroup('0')">
                <i class="el-button-suffix el-icon-plus"></i>添加条件组
              </el-button>
            </div>
          </div>
        </div>
      </div>
      <div class="set_promoter_footer flex">
        <!-- 默认条件弹框只展示关闭按钮 -->
        <div v-if="defaultApprovalDrawer">
          <el-button type="primary" @click="approverDrawer = false"
            >关闭</el-button
          >
        </div>
        <div class="flex" v-else>
          <el-button type="primary" @click="saveApprover">确定</el-button>
          <el-button @click="cancellation()">取消</el-button>
        </div>
      </div>
    </el-drawer>
  </div>
</template>
<script>
import addNode from "./addNode";
import cptPopver from "./cptPopver";
import { mapState } from "vuex";
// import { sysUserList } from "@/api/BasicSettings/sysUser";
// import { positionListAllByDeptId } from '@/api/BasicSettings/Postion'
import { listUser } from "@/api/system/user";
export default {
  name: "nodeWrap",
  computed: {
    ...mapState({
      deptList: (state) => state.user.deptList,
      deptNameS: (state) => state.user.deptNameS,
    }),
  },
  components: { addNode, cptPopver },
  props: ["nodeConfig", "isTried"],
  data() {
    return {
      ban: false,
      // 控制节点图片弹框的图片上传数据
      imageUrl: "",
      // 图片
      dialogVisible: "false",
      // 上传图片
      fileList: [],
      // ban: false,
      length: "",
      // 类型
      leiixng: [
        { id: "1", username: "请假审批" },
        { id: "2", username: "付款审批" },
      ],
      form: {
        deptId: "",
        name: "",
        nam: "",
      },
      // 部门列表
      records: [],
      deptArr: [],
      caDeptId: "",
      // 人员
      staffer: [],
      // 岗位
      useroptios: [],
      // input5: "",
      // input4: "",
      placeholderList: ["发起人", "节点人", "抄送人"],
      approverConfig: {},
      searchUser: "",
      directorLevel: "1", //主管层级
      nodeUser: "", //审批人（stringList）
      approverDrawer: false, //审批弹框
      defaultApprovalDrawer: false, //默认条件弹框
      conditionDrawer: false, //条件弹框
      //条件弹框字段
      conditionsConfig: {},
      conditionConfig: {}, //条件弹框item
      userInfo: {
        data: [],
        total: 0,
      },
      operatorList: [">="],
      // -----
      isInputList: [],
      isInput: false,
      hasFlag: false,
      conditionTip: "",
      bPriorityLevel: "",
      conditionList: [],
      pager: {
        current: 1,
        size: 10,
      },
      selectionList: [], //表格选中id
      userOriginList: [],
    };
  },
  watch: {
    // 部门renyuan
    async "approverConfig.nodeUserType.deptId"(val) {
      console.log("val", val);
      if (val && val.length) {
        // 查询岗位
        let res = await listUser({
          pageNum: 1,
          pageSize: 100,
          deptId: val[val.length - 1],
        });
        this.staffer = res.rows;
      }
    },
    // async "approverConfig.nodeUserType.postId"(val) {
    //   if (val) {
    //     let res = await sysUserList({
    //       pageIndex: 1,
    //       pageSize: 100,
    //       condition: {
    //         position_id: val,
    //       },
    //     });
    //     this.staffer = res.records;
    //   }
    // },
    approverDrawer(val) {
      if (!val) {
        this.defaultApprovalDrawer = false;
      }
    },
    approverDrawer(val) {
      if (!val) {
        this.hasFlag = false;
        this.conditionTip = "";
        // 清空图片
        this.fileList = [];
      }
    },
  },
  mounted() {
    // this.departmentList();
    // console.log('this.nodeConfig', this.nodeConfig);
  },
  methods: {
    async cancellation() {
      // if (!this.approverConfig.nodeUserType.postName) {
      //   this.$emit('update:nodeConfig', this.nodeConfig.childNode)
      // } else {
      //   console.log(2)
      // }
      this.approverDrawer = false;
    },
    cascaderChange() {
      // console.log('选择部门')
      this.approverConfig.nodeUserType.deptIds =
        this.approverConfig.nodeUserType.deptId[
          this.approverConfig.nodeUserType.deptId.length - 1
        ];
      this.$set(this.approverConfig.nodeUserType, "userId", "");
      this.$set(this.approverConfig.nodeUserType, "userName", "");
      this.approverConfig.nodeUserType.staffIds = "";
      this.approverConfig.nodeUserType.positionIds = "";
      this.useroptios = [];
      this.staffer = [];
      this.approverConfig.nodeUserType.userId = "";
    },
    // 部门
    departmentList() {
      this.$http.getPost("pc/pre/dept/listTree", {}, ({ data: res }) => {
        if (res.code == 0) {
          this.deptArr = res.data;
        } else {
          this.$messagee.error(res.msg);
        }
      });
    },
    remoteMethod(query) {
      this.searchUser = query;
      if (query !== "") {
        if (this.approverConfig.nodeUserType.type === "user") {
          // this.companyUsersList();
        }
      } else {
        this.staffer = this.userOriginList;
      }
    },
    selectionChange(val) {
      this.selectionList = val.map((item) => item.id);
    },
    saveUserInfo() {
      this.approverConfig.nodeUserType.deptIds = this.selectionList;
      // this.dialogFlag = false;
    },
    //删除条件组和条件
    removeCondition(conditonflag, index, ind) {
      // console.log(1212)
      // return console.log(this.approverConfig.conditionList)
      if (conditonflag === "group") {
        this.approverConfig.conditionList.splice(index, 1);
        return;
      }
      this.approverConfig.conditionList[index].conditionChildrenNodes.splice(
        ind,
        1
      );
    },
    //添加条件组
    addConditionGroup(flag, item) {
      if (flag === "1") {
        item.conditionChildrenNodes.push({
          // conditionOperator: "",

          // leftFileds: "",
          approvalKeys: "",
          approvalKeyValues: "",
          // input4:"",
        });
        return;
      }
      this.approverConfig.conditionList.push({
        conditionChildrenNodes: [],
        conditionGroupOperator: "",
      });
    },
    //节点类型
    setTypeRadio(val) {
      // if (this.approverConfig.nodeUserType.deptIds.length > 0) {
      // this.caDeptId = ''
      this.approverConfig.nodeUserType.deptIds =
        this.approverConfig.nodeUserType.deptId[
          this.approverConfig.nodeUserType.deptId.length - 1
        ];
      this.$set(this.approverConfig.nodeUserType, "deptName", "");
      this.$set(this.approverConfig.nodeUserType, "postId", "");
      this.$set(this.approverConfig.nodeUserType, "postName", "");
      this.$set(this.approverConfig.nodeUserType, "userId", "");
      this.$set(this.approverConfig.nodeUserType, "userName", "");
      this.$set(this.approverConfig.nodeUserType, "userIds", "");
      this.$set(this.approverConfig.nodeUserType, "userNames", "");
      // console.log(this.approverConfig)
      // console.log(this.approverConfig.nodeUserType.deptIds)
      // console.log(this.caDeptId)
      this.approverConfig.nodeUserType.staffIds = "";
      this.approverConfig.nodeUserType.positionIds = "";
      // this.approverConfig.nodeUserType.deptIds = ''
      this.approverConfig.nodeUserType.positionIds = "";
      // }
    },
    //修改节点name
    editNodename() {
      this.$set(this.approverConfig, "titleInputFlag", true);
    },
    nodeNameBlur() {
      this.$set(this.approverConfig, "titleInputFlag", false);
    },
    //条件显示
    conditionStr(item, index) {
      // console.log(item)

      let {
        conditionList, //条件组
        conditionString, //条件数据
        conditionStringName, //条件显示
      } = item;
      let arr = [true]; //判断条件是否有值

      if (conditionList.length === 0 || conditionString === "") {
        if (
          item.nodeName === "默认" &&
          this.nodeConfig.conditionNodes[0].conditionString
        ) {
          return (
            "<" +
            this.nodeConfig.conditionNodes[0].conditionString.replace(
              /[^\d]/g,
              ""
            )
          );
        }
      }
      if (conditionList.length !== 0) {
        if (conditionList.length === 1) {
          //当条件组为一个
          conditionList[0].conditionChildrenNodes &&
            conditionList[0].conditionChildrenNodes.forEach((item, index) => {
              if (item.approvalKeys == "" || item.approvalKeyValues == "") {
                arr.push(false);
              }
              if (index !== 0 && item.conditionOperator == "") {
                arr.push(false);
              }
            });
        } else {
          //当条件组为多个（判断是否有运算符）
          conditionList.forEach((item, index) => {
            if (index != conditionList.length - 1) {
              //条件组不为最后一个.校验是否有条件运算符
              if (item.conditionGroupOperator == "") arr.push(false);
            }
            if (
              item.conditionChildrenNodes &&
              item.conditionChildrenNodes.length > 0
            ) {
              item.conditionChildrenNodes.forEach((it, ind) => {
                if (it.approvalKeys === "" || it.approvalKeyValues == "")
                  arr.push(false);
                if (ind !== 0 && it.conditionOperator == "") arr.push(false);
              });
            } else if (
              item.conditionChildrenNodes &&
              item.conditionChildrenNodes.length == 0
            ) {
              arr.push(false);
            }
          });
        }
        if (arr.includes(false)) {
          return "请设置条件";
        }
      }

      return conditionString;
    },
    dealStr(str, obj) {
      // 创建空的数组
      let arr = [];
      let list = str.split(",");
      for (var elem in obj) {
        list.map((item) => {
          if (item == elem) {
            arr.push(obj[elem].value);
          }
        });
      }
      return arr.join("或");
    },
    //审批人抄送人显示和校验
    setApproverStr(nodeConfig) {
      let type = "会签";
      let role = "部门主管";
      if (nodeConfig.nodeUserType.type === "role") role = "角色";
      if (nodeConfig.nodeUserType.type === "user") role = "用户";
      if (nodeConfig.nodeUserType.value == "") return "";
      if (nodeConfig.type === 1) {
        //审批
        if (nodeConfig.examineMode === "1") type = "会签";
        if (nodeConfig.examineMode === "2") type = "或签";
        if (nodeConfig.examineMode === "3") type = "逐级审批";
        //
        let str = nodeConfig.nodeUserType.valueName.split(",");
        // console.log(str, 123)
        // return `由${role}:${nodeConfig.nodeUserType.valueName}${type}`;
        if (str.length >= 2) return `由${str[1]}:${str[0]}${type}`;
        else return `由${role}:${str[0]}${type}`;
      }
      if (nodeConfig.type === 2) {
        //抄送
        if (nodeConfig.nodeUserType.value == "") return "";
        // 角色、用户
        return `给${role}：${nodeConfig.nodeUserType.valueName}抄送`;
      }
    },
    saveApprover1() {
      this.approverDrawer = false;
    },
    //保存弹框设置
    saveApprover() {
      if (!this.approverConfig.nodeUserType.deptIds)
        return this.$modal.msgWarning(`请选择部门`);

      if (!this.approverConfig.nodeUserType.userId)
        return this.$modal.msgWarning(`请选择人员`);
      this.approverDrawer = false;
      // console.log('this.approverConfig', this.approverConfig)
      if (this.approverConfig.type === 3) {
        this.saveCondition();
        return;
      }
      this.staffer.forEach((item) => {
        if (this.approverConfig.nodeUserType.type === "user") {
          if (item.userId === this.approverConfig.nodeUserType.userId)
            this.approverConfig.nodeUserType.userName = item.username;
        }
      });
      this.staffer.forEach((e) => {
        if (e.userId == this.approverConfig.nodeUserType.userId) {
          this.approverConfig.nodeUserType.userName = e.nickName;
        }
      });
      this.approverConfig.nodeUserType.deptName =
        this.deptNameS[this.approverConfig.nodeUserType.deptId]; // 人员
      // let list = this.approverConfig.nodeUserType.staffIds;
      // 部门
      // let lister = this.approverConfig.nodeUserType.deptIds;
      // this.approverConfig.nodeUserType.deptName = this.di(
      //   this.deptArr,
      //   this.approverConfig.nodeUserType.deptIds
      // );
      // console.log("listlistlist", list);
      // let nameList = []; // 下拉框:审批角色是name，指定用户是userName
      // if (list) {
      //   this.staffer.forEach((item) => {
      //     if (this.approverConfig.nodeUserType.type === "user") {
      //       if (item.userId === list) nameList.push(item.username);
      //     }
      //   });

      //   this.deptArr.map((item) => {
      //     if (this.approverConfig.nodeUserType.type === "user") {
      //       if (item.id == lister) {
      //         nameList.push(item.deptName);
      //       }
      //       if (item.children && item.children.length) {
      //         item.children.map((itm) => {
      //           if (itm.id == lister) {
      //             nameList.push(itm.deptName);
      //           }
      //           if (itm.children && itm.children.length) {
      //             itm.children.map((im) => {
      //               if (im.id == lister) {
      //                 nameList.push(im.deptName);
      //               }
      //               if (im.children && im.children.length) {
      //                 im.children.map((ii) => {
      //                   if (ii.id == lister) {
      //                     nameList.push(ii.deptName);
      //                   }
      //                   if (ii.children && ii.children.length) {
      //                     ii.children.map((mm) => {
      //                       if (mm.id == lister) {
      //                         nameList.push(mm.deptName);
      //                       }
      //                     });
      //                   }
      //                 });
      //               }
      //             });
      //           }
      //         });
      //       }
      //     }
      //   });
      //   this.approverConfig.nodeUserType.value = list;
      //   this.approverConfig.nodeUserType.valueName = nameList.join(",");
      // }
      this.approverConfig.error =
        this.setApproverStr(this.approverConfig) === "";
      // 通过hasFlag区分添加节点后自动出现弹框及点击出现弹框
      if (this.hasFlag) {
        if (
          this.nodeConfig.conditionNodes &&
          this.nodeConfig.conditionNodes.length > 0 &&
          this.conditionTip
        ) {
          //条件分支
          this.nodeConfig.conditionNodes.forEach((element) => {
            if (
              element.childNode &&
              !element.childNode.nodeUserType.value &&
              element.childNode.nodeName === this.approverConfig.nodeName
            ) {
              //条件分支节点赋值
              element.childNode = this.approverConfig;
            }
          });
        } else {
          this.nodeConfig.childNode = this.approverConfig;
        }
        this.$emit("update:nodeConfig", this.nodeConfig);
      } else {
        this.$emit("update:nodeConfig", this.approverConfig);
      }
      console.log(this.approverConfig.nodeUserType);
    },
    di(arr, id) {
      for (let i = 0; i < arr.length; i++) {
        const item = arr[i];
        if (item.id == id) {
          return item.label;
        } else if (item.hasOwnProperty("children")) {
          const label = this.di(item.children, id);
          if (label) {
            return label;
          }
        }
      }
      return null;
    },
    //保存条件设置
    saveCondition() {
      // console.log(this.approverConfig);
      // console.log(this.nodeConfig);
      // console.log(this.hasFlag);
      this.approverDrawer = false;
      let conditionString = ""; // 后端要的数据
      let conditionStringName = ""; //前端显示
      //条件循环设置
      if (this.approverConfig.conditionList.length > 0) {
        this.approverConfig.conditionList.forEach((item, indx) => {
          if (
            item.conditionChildrenNodes &&
            item.conditionChildrenNodes.length > 0
          ) {
            item.conditionChildrenNodes.forEach((it, ind) => {
              conditionString =
                conditionString + it.approvalKeys + it.approvalKeyValues;
              conditionStringName =
                conditionStringName +
                it.leftFiledsName +
                it.approvalKeys +
                it.approvalKeyValues;
            });
          }
          conditionString = conditionString + item.conditionGroupOperator;
          conditionStringName =
            conditionStringName + item.conditionGroupOperator;
        });
      }
      this.approverConfig.conditionString = conditionString;
      this.approverConfig.conditionStringName = conditionStringName;
      for (var i = 0; i < this.conditionsConfig.conditionNodes.length; i++) {
        this.conditionsConfig.conditionNodes[i].error =
          this.conditionStr(this.conditionsConfig.conditionNodes[i], i) ==
          "请设置条件";
      }
      // 区分添加节点后自动出现弹框及点击出现弹框
      if (this.hasFlag) {
        this.nodeConfig.childNode = this.conditionsConfig;
        this.$emit("update:nodeConfig", this.nodeConfig);
      } else {
        this.$emit("update:nodeConfig", this.conditionsConfig);
      }
    },
    //删除节点
    delNode() {
      this.$emit("update:nodeConfig", this.nodeConfig.childNode);
    },
    //添加条件
    addTerm() {
      let len = this.nodeConfig.conditionNodes.length;
      this.nodeConfig.conditionNodes.push({
        nodeName: "条件" + len,
        type: 3,
        priorityLevel: len + 1,
        conditionList: [],
        childNode: "",
      });
      for (var i = 0; i < this.nodeConfig.conditionNodes.length; i++) {
        this.nodeConfig.conditionNodes[i].error =
          this.conditionStr(this.nodeConfig.conditionNodes[i], i) ==
            "请设置条件" && i != this.nodeConfig.conditionNodes.length - 1;
      }
      this.$emit("update:nodeConfig", this.nodeConfig);
    },
    //删除条件
    delTerm(index) {
      this.nodeConfig.conditionNodes.splice(index, 1);
      for (var i = 0; i < this.nodeConfig.conditionNodes.length; i++) {
        this.nodeConfig.conditionNodes[i].error =
          this.conditionStr(this.nodeConfig.conditionNodes[i], i) == 20;
        "请设置条件" && i != this.nodeConfig.conditionNodes.length - 1;
      }
      this.$emit("update:nodeConfig", this.nodeConfig);
      if (this.nodeConfig.conditionNodes.length == 1) {
        if (this.nodeConfig.childNode) {
          if (this.nodeConfig.conditionNodes[0].childNode) {
            this.reData(
              this.nodeConfig.conditionNodes[0].childNode,
              this.nodeConfig.childNode
            );
          } else {
            this.nodeConfig.conditionNodes[0].childNode =
              this.nodeConfig.childNode;
          }
        }
        this.$emit(
          "update:nodeConfig",
          this.nodeConfig.conditionNodes[0].childNode
        );
      }
    },
    reData(data, addData) {
      if (!data.childNode) {
        data.childNode = addData;
      } else {
        this.reData(data.childNode, addData);
      }
    },
    //打开弹框
    setPerson(priorityLevel, item, data, tip) {
      // console.log('打开弹框')
      // console.log(priorityLevel, '|', item, '|', data, '|', tip)
      // console.log('this.nodeConfig', this.nodeConfig);
      if (this.nodeConfig.nodeUserType) {
        let idd = this.nodeConfig.nodeUserType
          ? this.nodeConfig.nodeUserType.deptIds
          : this.nodeConfig.childNode
          ? this.nodeConfig.childNode.nodeUserType.deptIds
          : "";
        this.deptArr.map((itemm) => {
          if (itemm.id == idd) {
            this.caDeptId = [itemm.id];
          }
          if (itemm.children && itemm.children.length) {
            itemm.children.map((itm) => {
              if (itm.id == idd) {
                this.caDeptId = [itemm.id, itm.id];
              }
              if (itm.children && itm.children.length) {
                itm.children.map((im) => {
                  if (im.id == idd) {
                    this.caDeptId = [itemm.id, itm.id, im.id];
                  }
                  if (im.children && im.children.length) {
                    im.children.map((ii) => {
                      if (ii.id == idd) {
                        this.caDeptId = [itemm.id, itm.id, im.id, ii.id];
                      }
                      if (ii.children && ii.children.length) {
                        ii.children.map((mm) => {
                          if (mm.id == idd) {
                            this.caDeptId = [
                              itemm.id,
                              itm.id,
                              im.id,
                              ii.id,
                              mm.id,
                            ];
                          }
                        });
                      }
                    });
                  }
                });
              }
            });
          }
        });
      }
      if (tip != "false" ? data != 1 : false) this.approverDrawer = true;
      // 默认条件
      if (item && item.nodeName === "默认") {
        this.conditionDrawer = true;
        this.operatorList = ["<"];
      } else {
        this.conditionDrawer = false;
        this.operatorList = [">=", ">"];
      }
      if (tip) {
        this.conditionTip = tip;
      }
      // console.log(data);
      if (data) {
        //添加节点自动出现弹框传值
        // console.log(2)
        this.hasFlag = true;
        // 条件
        if (priorityLevel == 1) {
          this.bPriorityLevel = priorityLevel;
          this.conditionsConfig = JSON.parse(JSON.stringify(data));
          this.approverConfig =
            this.conditionsConfig.conditionNodes[priorityLevel - 1];
          return;
        }
        // 审批人、抄送人
        let data1 = JSON.parse(JSON.stringify(data));
        // console.log(data1)
        data1.nodeUserType.type = "user";
        this.approverConfig = data1;
      } else {
        //点击出现弹框
        this.hasFlag = false;
        console.log(1);
        // 条件
        let { type } = this.nodeConfig;
        if (type == 4) {
          this.bPriorityLevel = priorityLevel;
          this.conditionsConfig = JSON.parse(JSON.stringify(this.nodeConfig));
          this.approverConfig =
            this.conditionsConfig.conditionNodes[priorityLevel - 1];
          return;
        }
        // 审批人、抄送人
        this.approverConfig = JSON.parse(JSON.stringify(this.nodeConfig));
        this.approverConfig.nodeUserType.type = "user";

        // console.log(' this.approverConfig', this.approverConfig)
      }
    },
    arrTransfer(index, type = 1) {
      //向左-1,向右1
      this.nodeConfig.conditionNodes[index] =
        this.nodeConfig.conditionNodes.splice(
          index + type,
          1,
          this.nodeConfig.conditionNodes[index]
        )[0];
      this.nodeConfig.conditionNodes.map((item, index) => {
        item.priorityLevel = index + 1;
      });
      for (var i = 0; i < this.nodeConfig.conditionNodes.length; i++) {
        this.nodeConfig.conditionNodes[i].error =
          this.conditionStr(this.nodeConfig.conditionNodes[i], i) ==
            "请设置条件" && i != this.nodeConfig.conditionNodes.length - 1;
      }
      this.$emit("update:nodeConfig", this.nodeConfig);
    },
  },
};
</script>
<style lang="scss" scoped>
.el-dialog__title {
  font-size: 18px !important;
  font-weight: 600 !important;
}

.default-style {
  margin-left: 25px;
}

.search-style {
  label {
    width: 50px !important;
  }

  .el-row {
    padding-right: 0px !important;
  }

  .el-form-item__content {
    margin-left: 50px !important;
  }
}

.flex-style {
  display: flex;
  justify-content: space-between;
}

.dang-style {
  font-size: 14px;
}

.dialog-style {
  z-index: 99999 !important;
  background: rgba(0, 0, 0, 0.5);
}

.v-modal {
  background: none !important;
  z-index: -1 !important;
}

//弹框
.set_promoter {
  .el-drawer__header {
    margin-bottom: 0;
    padding: 0 24px;
    border-bottom: 1px solid #ebebeb;

    .title {
      height: 64px;
      line-height: 64px;
      font-size: 20px;
      color: #333;
      justify-content: flex-start;

      i {
        margin-left: 8px;
        font-size: 30px;
      }
    }
  }

  .el-drawer__body {
    overflow-y: auto;
    max-height: calc(100% - 64px);
    padding-bottom: 80px;
  }

  .drawer-content {
    padding: 24px;

    .el-radio {
      margin-bottom: 16px;

      .mark {
        color: #828282;
      }

      &.is-checked {
        .mark {
          color: #4880ff;
        }
      }

      &:last-child {
        margin-bottom: 0;
      }
    }
  }

  .drawer-content-condition {
    padding: 24px 0;

    .condition-conent-group {
      border-bottom: solid 1px #ebebeb;
      padding-bottom: 20px;

      .condition-group-title {
        padding: 0 24px;
        background: #f7f8fa;
        height: 48px;
        border-top: solid 1px #ebebeb;
        border-bottom: solid 1px #ebebeb;
        margin-bottom: 12px;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

      .condition-group-select {
        padding: 0 24px;
      }

      .remove {
        color: #828282;

        &:hover {
          cursor: pointer;
          color: #4880ff;
        }
      }

      .mg-bot-10 {
        margin-bottom: 10px;
      }

      .conditionbtn {
        .el-button {
          border: 1px dashed #4880ff;
          width: 110px;
        }
      }
    }

    .conditionbtn {
      padding: 0 24px;
      margin-top: 26px;

      .el-button {
        border: solid 1px #4880ff;
        color: #4880ff;
        width: 123px;
      }
    }
  }

  .set_promoter_footer {
    height: 89px;
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 24px;
    justify-content: flex-end;
    background: #fff;
    width: 100%;
    border-top: 1px solid #ebebeb;
    z-index: 2;
  }

  .icon-icon_explain {
    color: #bfbfbf;
  }
}

.error_tip {
  position: absolute;
  top: 36px;
  right: 0px;
  transform: translate(150%, 0px);

  i {
    font-size: 24px;
  }
}

.add-node-popover-body {
  display: flex;
}

.el-drawer:focus,
.el-drawer__close-btn:focus {
  outline: none;
}

.node-wrap-box {
  display: inline-flex;
  flex-direction: column;
  position: relative;
  width: 280px;
  min-height: 72px;
  background: #fff;
  border-radius: 4px;
  cursor: pointer;
}
</style>
